<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->

    <title>layabox</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./assets/css/animate.min.css" />
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/header.css" />
    <link rel="stylesheet" href="./assets/css/index.css" />
    <link rel="stylesheet" href="./assets/css/footer.css">
</head>

<body>
    <!-- 头部 -->
    <header class="header">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid  wow fadeIn">
                <!-- 移动端导航 -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand logo" href="javascript:void(0)">
                        <img src="./assets/images/logo.png" />
                    </a>
                </div>

                <!-- 导航条 -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <!-- 导航内容 -->
                    <ul class="menu nav navbar-nav">
                        <li class="active"><a href="#" data-lang="menu1">首页</a></li>
                        <li><a href="#list1" data-url="list1" data-lang="menu2">Laya引擎</a></li>
                        <li><a href="#list2" data-url="list2" data-lang="menu3">Laya优势</a></li>
                        <li><a href="#list3" data-url="list3" data-lang="menu4">Laya产品</a></li>
                        <li><a href="#list4" data-url="list4" data-lang="menu5">Laya中心</a></li>
                        <li><a href="#list5" data-url="list5" data-lang="menu6">合作伙伴</a></li>
                    </ul>

                    <!-- 切换语言 -->
                    <ul class="language nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">
                                Language <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a onclick="SelectLang('zh')" href="javascript:void(0)">中文</a></li>
                                <li><a onclick="SelectLang('en')" href="javascript:void(0)">English</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- 轮播图 -->
    <div id="carousel-example-generic" class="carousel banner slide wow flipInY" data-wow-delay="200ms"
        data-ride="carousel">
        <!-- 点 -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- 图片部分 -->
        <div class="carousel-inner banner_img" role="listbox">
            <div class="item active">
                <img class="img-responsive" src="./assets/images/banner1.jpg" width="100%" />
            </div>
            <div class="item">
                <img class="img-responsive" src="./assets/images/banner2.jpg" width="100%" />
            </div>
            <div class="item">
                <img class="img-responsive" src="./assets/images/banner3.png" width="100%" />
            </div>
        </div>

        <!-- 左右按钮 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only" data-lang="rem1">左边</span>
        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only" data-lang="rem2">右边</span>
        </a>
    </div>
    <!-- Laya引擎 -->
    <div class="list1" id="list1">
        <div class="container list1_box">
            <div class="col-md-8">
                <p class="h1 title1 wow fadeInLeft" data-wow-delay="100ms" data-lang="rem3">LayaFlash 引擎</p>
                <p class="title2 wow fadeInLeft" data-wow-delay="300ms" data-lang="rem4">让Flash技术变成开发HTML5产品的利器</p>
                <ul class="listul">
                    <li class="col-md-6 wow bounceIn" data-wow-delay="300ms">
                        <div class="left col-md-3">
                            <img src="./assets/images/main1_03.png" />
                        </div>
                        <div class="right col-md-9">
                            <p data-lang="rem5">快速Flash产品转换</p>
                            <p data-lang="rem6">Flash页游\手游仅需1个人7天即可
                                转换为HTML5和APP游戏</p>
                        </div>
                    </li>
                    <li class="col-md-6 wow bounceIn" data-wow-delay="600ms">
                        <div class="left col-md-3">
                            <img src="./assets/images/main1_05.png" />
                        </div>
                        <div class="right col-md-9">
                            <p>LayaFlash IDE</p>
                            <p data-lang="rem7">支持代码编译、调试、压缩与混淆
                                加密、资源转换、在线文档等功能</p>
                        </div>
                    </li>
                    <li class="col-md-6 wow bounceIn" data-wow-delay="700ms">
                        <div class="left col-md-3">
                            <img src="./assets/images/main1_09.png" />
                        </div>
                        <div class="right col-md-9">
                            <p data-lang="rem8">HTML5零学习成本</p>
                            <p data-lang="rem9">AS3开发者可直接使用Flash开源框
                                架和工具链进行开发HTML5</p>
                        </div>
                    </li>
                    <li class="col-md-6 wow bounceIn" data-wow-delay="800ms">
                        <div class="left col-md-3">
                            <img src="./assets/images/main1_10.png" />
                        </div>
                        <div class="right col-md-9">
                            <p data-lang="ram1">性能媲美APP</p>
                            <p data-lang="ram2">LayaFlash引擎的重度游戏已运行于
                                QQ空间等平台，性能媲美APP</p>
                    </li>
                </ul>
            </div>
            <div class="col-md-3">
                <div class="col-md-3 images ">
                    <img src="./assets/images/main1_rig_03.png">
                </div>
            </div>
        </div>
    </div>

    <!-- 优势 -->
    <div class="list2" id="list2">
        <div class="container">
            <div class="newbox">
                <div class="col-md-3 images wow fadeInLeft" data-wow-delay="200ms">
                    <img src="./assets/images/newimg.png">
                </div>
                <div class="col-md-6 content wow fadeInRight " data-wow-delay="600ms">
                    <div class="title" data-lang="newlist-title">Layabox 优势</div>
                    <ul class="list">
                        <li class="item">
                            <div class="left">
                                <img src="./assets/images/newicon1.png" />
                            </div>
                            <div class="right" data-lang="newlist1" data-lang="ram3">
                                快速上手，Flash程序员3小时掌握HTML5开发
                            </div>
                        </li>
                        <li class="item">
                            <div class="left">
                                <img src="./assets/images/icon_img2.png" />
                            </div>
                            <div class="right" data-lang="newlist2" data-lang="ram4">
                                4年优化打磨，LayaPlayer运行器性能媲美APP
                            </div>

                        </li>
                        <li class="item">
                            <div class="left">
                                <img src="./assets/images/icon_img3.png" />
                            </div>
                            <div class="right" data-lang="newlist3" data-lang="ram5">
                                超5亿的LayaPlayer移动设备安装量帮助CP发行
                            </div>
                        </li>
                        <li class="item">
                            <div class="left">
                                <img src="./assets/images/icon_img4.png" />
                            </div>
                            <div class="right" data-lang="newlist4" data-lang="ram6">
                                使用LayaFlash开发大型HTML5游戏的企业超100家
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 产品家族 -->
    <div class="list3" id="list3">
        <div class="container list3box">
            <!-- 标题 -->
            <p class="h1 text-center list3_title  wow fadeInDown" data-lang="ram7">Layabox产品家族</p>
            <div class=" list3_house">
                <div class="col-md-6 list3_sublist wow fadeInRight" data-wow-delay="200ms">
                    <div class="item_img col-md-3 col-md-3">
                        <img src="assets/images/icon_images1.png" />
                    </div>
                    <!--文字-->
                    <div class="list3_sublist_text col-md-9">
                        <p class="h3">LayaAir</p>
                        <p class="h5" data-lang="ram8">核心库仅100K左右的新一代HTML5引擎，支持AS3\TS\JS语言开发，
                            支持2D\3D，非运行器模式下性能媲美APP。</p>
                    </div>
                </div>
                <div class="col-md-6 list3_sublist wow fadeInLeft" data-wow-delay="200ms">
                    <div class="item_img col-md-3">
                        <img src="assets/images/icon_images2.png" />
                    </div>
                    <!--文字-->
                    <div class="list3_sublist_text col-md-9">
                        <p class="h3">LayaPublish</p>
                        <p class="h5" data-lang="ram9">Layabox发行业务，通过在H5产业链中的技术
                            桥梁优势，帮助CP获得流量支持。</p>
                    </div>
                </div>
                <div class="col-md-6 list3_sublist wow fadeInLeft" data-wow-delay="700ms">
                    <div class="item_img col-md-3">
                        <img src="assets/images/icon_images3.png" />
                    </div>
                    <!--文字-->
                    <div class="list3_sublist_text col-md-9">
                        <p class="h3">LayaFlash</p>
                        <p class="h5" data-lang="rcm1">使用Flash AS3语言开发H5的引擎框架，可直
                            接在FB或FD中开发、调试、编译H5，也可快
                            速将Flash页游\手游转换成H5游戏。</p>
                    </div>
                </div>
                <div class="col-md-6 list3_sublist wow fadeInRight" data-wow-delay="800ms">
                    <div class="item_img col-md-3">
                        <img src="assets/images/icon_images4.png" />
                    </div>
                    <!--文字-->
                    <div class="list3_sublist_text col-md-9">
                        <p class="h3">LayaStore</p>
                        <p class="h5" data-lang="rcm2">嵌入式HTML5商城，APP只需嵌入20K的SDK
                            即可以获得托管式HTML5商店服务，进入流量
                            获利新时代。</p>
                    </div>
                </div>
                <div class="col-md-6 list3_sublist wow  fadeInUp" data-wow-delay="800ms">
                    <div class="item_img col-md-3">
                        <img src="assets/images/icon_images5.png" />
                    </div>
                    <!--文字-->
                    <div class="list3_sublist_text col-md-9">
                        <p class="h3">LayaPlayer</p>
                        <p class="h5" data-lang="rcm3">HTML5高速运行器，性能卓越、支持大型
                            HTML5游戏流畅运行，目前已植入QQ、百度
                            等20多家主流平台，安装量超5亿。。</p>
                    </div>
                </div>
                <div class="col-md-6 list3_sublist wow  fadeInUp" data-wow-delay="800ms">
                    <div class="item_img col-md-3">
                        <img src="assets/images/icon_images6.png" />
                    </div>
                    <!--文字-->
                    <div class="list3_sublist_text col-md-9">
                        <p class="h3">LayaOpen</p>
                        <p class="h5" data-lang="rcm4">Layabox开放平台，整合了Laya提供的各项运
                            营，管理服务的服务，提供给游戏提供商和互
                            联网渠道的统一开放平台。</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
    <!-- 游戏 -->
    <div class="list4" id="list4">
        <div class="container list4_box">
            <div class=" layabox_title  wow fadeInDown">
                <a href="javascript:;">
                    <p id="open" class="h4 text-right" data-lang="rcm5">更多</p>
                </a>
                <p class="h1 " data-lang="rcm6">采用Layabox引擎的精彩游戏</p>
            </div>
            <div class="sublis4">
                <!-- 视频 -->
                <div class="col-sm-4 videobox wow fadeInRight">
                    <img id="videoimg" src="./assets/images/videoimg.png" alt="">
                    <video id="video" class="video" controls="" ref="video" playsinline="true" x-webkit-airplay="true"
                        x5-playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" width="100%" controls
                        :poster="detail.pictureUrl" controlslist="nofullscreen nodownload noremoteplayback"
                        src="./assets/video/leimu1.mp4" title="点击播放视频">
                    </video>
                </div>
                <!--游戏 icon -->
                <div class="col-sm-8 gameico">
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="400ms"><img
                            src="./assets/images/table17.jpg" alt="">
                        <p class="" data-lang="rcm7">猎刃2</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="500ms"><img
                            src="./assets/images/table18.jpg" alt="">
                        <p data-lang="rcm8">上吧主公</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="600ms"><img
                            src="./assets/images/table19.jpg" alt="">
                        <p data-lang="rcm9">醉西游</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="600ms"><img
                            src="./assets/images/table20.jpg" alt="">
                        <p data-lang="rdm1">魔卡幻想</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="500ms"><img
                            src="./assets/images/table21.jpg" alt="">
                        <p data-lang="rdm2">站能战队</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="600ms"><img
                            src="./assets/images/table22.jpg" alt="">
                        <p data-lang="rdm3">刀塔大萝卜</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="700ms"><img
                            src="./assets/images/table23.jpg" alt="">
                        <p data-lang="rdm4">轰三国</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="700ms"><img
                            src="./assets/images/table24.jpg" alt="">
                        <p data-lang="rdm5">迷你猎人</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="700ms"><img
                            src="./assets/images/table25.jpg" alt="">
                        <p data-lang="rdm6">萌挂三国</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="750ms"><img
                            src="./assets/images/table26.jpg" alt="">
                        <p data-lang="rdm7">夺塔三国</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="800ms"><img
                            src="./assets/images/table27.jpg" alt="">
                        <p data-lang="rdm8">英雄争霸</p>
                    </a>
                    <a href="#" class="col-md-2 wow fadeInUp" data-wow-delay="800ms"><img
                            src="./assets/images/table28.jpg" alt="">
                        <p data-lang="rdm9">战争之门</p>
                    </a>

                </div>
            </div>
        </div>
    </div>
    <!-- 合作伙伴 -->
    <div class="list5" id="list5">
        <div class="container list5_box ">
            <div class="list5_title wow fadeInDown">
                <p class="h1" data-lang="rqm1">合作伙伴</p>
                <p class="h5" data-lang="rqm2">(排序不分前后)</p>
            </div>




            <div class=" ico_div wow fadeInUp" data-wow-delay="200ms">
                <a href="#"><img src="assets/images/table29.jpg" /></a>
                <a href="#"><img src="assets/images/table30.jpg" /></a>
                <a href="#"><img src="assets/images/table31.jpg" /></a>
                <a href="#"><img src="assets/images/table32.jpg" /></a>
                <a href="#"><img src="assets/images/table33.jpg" /></a>
                <a href="#"><img src="assets/images/table34.jpg" /></a>
            </div>
            <div class=" ico_div wow fadeInUp" data-wow-delay="400ms">
                <a href="#"><img src="assets/images/table35.jpg" /></a>
                <a href="#"><img src="assets/images/table36.jpg" /></a>
                <a href="#"><img src="assets/images/table37.jpg" /></a>
                <a href="#"><img src="assets/images/table38.jpg" /></a>
                <a href="#"><img src="assets/images/table39.jpg" /></a>
                <a href="#"><img src="assets/images/friend-icon12.png" /></a>
            </div>

        </div>
    </div>

    <footer class=" wow fadeInUp" data-wow-delay="400ms">
        <div class="footer wow fadeInUp" data-wow-delay="400ms">
            <div class="col-md-5 foo_left">
                <p>
                    <a href="#"><span data-lang="rqm3">公司简介</span></a>
                    <a href="#"> <span data-lang="rqm4">联系方式</span></a>
                    <a href="#"><span data-lang="rqm5">人才招聘</span></a>
                </p>
                <p>All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1</p>
            </div>
            <div class="col-md-3"></div>
            <div class="col-md-4 foo_right">
                <div>
                    <span class="imgspan"><a href="#"><img src="./assets/images/table40.jpg" alt=""></a></span>
                    <span class="imgspan"><a href="#"><img src="./assets/images/table41.jpg" alt=""></a></span>
                    <span class="imgspan"><a href="#"><img src="./assets/images/table42.jpg" alt=""></a></span>
                </div>
            </div>
            <div class="qrimg1 qrimg"><img src="./assets/images/qrimg1_03.png" alt=""><span></span></div>
            <div class="qrimg2 qrimg"><img src="./assets/images/qrimg1_03.png" alt=""><span></span></div>
            <div class="qrimg3 qrimg"><img src="./assets/images/qrimg1_03.png" alt=""><span></span></div>
        </div>
    </footer>
</body>

</html>
<script src="./assets/js/wow.min.repeat.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>

<script>
    //初始化懒加载插件
    new WOW().init()

    //加入锚点滚动效果
    $(function () {
        // a href == id 
        //锚点跳转滑动效果  获取 a 当中 href="#"  area href="#" 点击事件
        // a href="#list"
        $('a[data-url]').click(function () {
            //是否重复点击自己
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                //利用a链接href属性 来作为名称 去选中 元素中 id相同的元素   href = id
                var $target = $(this.hash);

                $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

                if ($target.length) {
                    var targetOffset = $target.offset().top;
                    $('html,body').animate({
                        scrollTop: targetOffset
                    },
                        1000);
                    return false;
                }
            }
        });
    })


    var videoState = true
    $('#video').click(function () {
        if (videoState) {
            $('video').trigger('play');
            $('video').css('opacity', '1')
            videoState = false
        } else {
            $('video').trigger('pause');
            $('video').css('opacity', '0')
            videoState = true
        }
    })
    // footer
    function QR(q) {
        $('.imgspan').eq(q).hover(function () {
            if (parseInt($('body').css('width')) < 1000) {
                return
            } else {
                $('.qrimg').eq(q).css('transform', 'scale(1)')
                $('.qrimg').eq(q).css('opacity', '1')
                $('.qrimg').eq(q).css('top', '-130px')

            }
        }, function () {
            $('.qrimg').eq(q).css('transform', 'scale(0)')
            $('.qrimg').eq(q).css('opacity', '0')
            $('.qrimg').eq(q).css('top', '-120px')
        })
    }
    QR('0')
    QR('1')
    QR('2')

    //设置默认语言 先要看缓存里面有没有设置
    var current = localStorage.getItem('lang')

    //判断是否存在
    if (!current) {
        ///设置一个默认的中文
        localStorage.setItem('lang', 'zh')
        var current = 'zh'
    }

    //一进来就触发中英文
    SelectLang(current)


    //获取所有的语言项目
    var $langlist = $("*[data-lang]")


    //切换中英文
    function SelectLang(lang) {
        //设置缓存(当前的语言)
        localStorage.setItem('lang', lang)

        //请求语言项文件
        $.ajax({
            url: `./assets/local/${lang}.json`,
            type: "POST",
            dataType: "json",
            success: function (success) {
                $langlist.each(function () {
                    var langname = $(this).data("lang")
                    var content = success[langname]

                    $(this).text(content)
                })
            }
        })
    }





</script>